<template>
    <div class="page-body">
        <a-tabs v-model:activeKey="activeKey">
            <a-tab-pane key="1" tab="新建问题反馈">
                <div class="feedback-box">
                    <a-form :model="formState" :labelCol="labelCol" name="validate_other" v-bind="formItemLayout">
                        <a-form-item class="item" name="radio-group" label="问题分类">
                            <a-radio-group v-model:value="formState.feedback_category_id">
                                <a-radio-button v-for="option in classOptions" :key="option.value"
                                    :value="option.value">{{ option.label }}</a-radio-button>
                            </a-radio-group>
                        </a-form-item>
                        <a-form-item class="item" label="问题描述">
                            <div class="tip">
                                请详细描述您的建议、意见、问题等。
                            </div>
                            <a-textarea v-model:value="formState.description" :rows="4" maxLength="300" />
                        </a-form-item>
                        <a-form-item class="item" name="upload" label="附件" extra="">
                            <a-upload v-model:fileList="formState.upload" :multiple="false" :max-count="10"
                                :customRequest="customUpload1" @change="handleChange1" @drop="handleDrop1">
                                <a-button>
                                    <template #icon>
                                        <UploadOutlined />
                                    </template>
                                    点击上传
                                </a-button>
                            </a-upload>
                        </a-form-item>
                        <a-form-item class="item" label="联系方式">
                            <a-input v-model:value="formState.value" placeholder="手机号或邮箱" />
                        </a-form-item>
                        <a-form-item class="item" :wrapper-col="{ span: 12, offset: 6 }">
                            <a-button class="btn" type="primary" html-type="submit" @click="submitForm">提交反馈</a-button>
                            <a-button html-type="submit" @click="handleBack">取消</a-button>
                        </a-form-item>
                    </a-form>
                </div>
            </a-tab-pane>
            <a-tab-pane key="2" tab="问题反馈记录">
                <FeefdBack />
            </a-tab-pane>
        </a-tabs>
    </div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import apiClient from '@/api'
const activeKey = ref('1');
import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
import systemApi from "@/api/system";
import FeedbackApi from "@/api/Feedback";
import { message } from "ant-design-vue";

import FeefdBack from './feedback/index.vue'

const router = useRouter();
// 加载问题分类选项
const classOptions = ref([])
// 查询表单布局配置信息
const labelCol = { style: { width: "100px" } };
const loadClassOptions = async () => {
    try {
        const response = await apiClient.apiFeedbackCategoryOptionsPost({ keyWords: '' })
        if (response.data) {
            classOptions.value = response.data.map(item => ({
                label: item.text || item.label,
                value: item.value
            }))
        }
    } catch (error) {
        console.error('加载问题分类选项失败:', error)
        // 如果接口调用失败，使用默认选项
        classOptions.value = [
            { label: '技术问题', value: 1 },
            { label: '账户问题', value: 2 },
            { label: '功能建议', value: 3 },
            { label: '其他', value: 4 }
        ]
    }
}
const formState = ref({
    feedback_category_id: '',
    description: '',
    tel: '',
    email: '',
    value:'',
    upload:[]
})

const url = ref('');

//  预览图片
const customUpload1 = async (options) => {
    const { file, onSuccess, onError } = options;
    try {
        const response = await systemApi.FileUpload(file);
        if (response && response.url) {
            onSuccess(response, file);
        } else {
            onError(new Error("上传失败"));
        }
    } catch (error) {
        console.error("图片文件上传失败:", error);
        onError(error);
    }
};

const handleChange1 = (info) => {
    const status = info.file.status;
    if (status !== "uploading") {
        console.log(info.file, info.fileList);
    }
    if (status === "done") {
        message.success(`${info.file.name} 图片文件上传成功`);
        // url.value = info.file.response

    } else if (status === "error") {
        message.error(`${info.file.name} 图片文件上传失败`);
    }
};
function handleDrop1(e) {
    console.log("handleChange", e.dataTransfer.files);
}


const submitForm = async () => {
    console.log(formState.value)
    try {
       if(formState.value.feedback_category_id === ''){
        message.error('请选择问题分类');
        return
       }
       if(formState.value.description === ''){
        message.error('请输入问题描述');
        return
       }
       if(formState.value.value === ''){
        message.error('请输入联系方式');
        return
       }
       if(!formState.value.upload || formState.value.upload.length == 0){
        message.error('请上传附件');
        return
       }
        if(formState.value.value.indexOf('@') > -1 ){
            formState.value.email = formState.value.value
        }else{
            formState.value.tel = formState.value.value
        }
         
        const obj = ref({
            feedback_category_id: formState.value.feedback_category_id,
            description: formState.value.description,
            tel: formState.value.tel,
            email: formState.value.email,
        })

         const res = await FeedbackApi.UserCreateFeedback(obj.value)
         console.log(res)
         const feedback_id = res.feedback_id

         

         formState.value.upload.forEach(async item => {
            
            const data = ref({
                feedback_id:feedback_id,
                fileId:item.response.file_id,
                file_name:item.response.file_name,
                file_size:item.response.file_size,
                file_content_type:item.response.file_content_type,
                url:item.response.url,
            })
            console.log(data.value)
            const res1 = await apiClient.apiFeedbackFileCreatePost(data.value)
         })
         

        
        message.success('反馈提交成功');
        activeKey.value = '2'
         // 清空表单
        formState.value = {
            feedback_category_id: '',
            description: '',
            tel: '',
            email: '',
            value:'',
            upload:[]
        };
    
    } catch (error) {
        message.error('反馈提交失败');
    }
};
const handleBack = () => {
  router.back();
};
onMounted(() => {
    loadClassOptions()
});
</script>
<style lang="less" scoped>
.page-body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px;
    border-radius: 12px;
    background-color: #FFF;
    overflow: auto;

    .feedback-box {
        .item {
            margin: 20px 0 40px 0;

            .tip {
                font-size: 14px;
                color: #999;
                height: 32px;
                line-height: 32px;
            }

            .btn {
                margin-right: 30px;
            }
        }


    }

}
</style>
